<template>
  <div class="iot_search" :class="focusFlog">
    <input type="text" v-model="keyword" placeholder="输入搜索商品" @keydown.enter="Search(keyword),MenuChange(4),ChangeIndexFlog(16)" @focus="searchFocus(1)" @blur="searchFocus(2)">
  </div>
</template>

<script>
import {inject, reactive} from 'vue'
import { sendAxios } from '../../public/packaged_axios';
export default {
    name:'UpSearch',
    setup(){
      let keyword = inject('keyword')
      let Goods = inject('Goods')
      const MenuChange = inject('MenuChange')
      const ChangeIndexFlog = inject('ChangeIndexFlog')
      function Search(keyword){
        sendAxios('https://api-hmugo-web.itheima.net/api/public/v1/goods/search?query='+keyword).then(data=>{
          Goods[16] = data.message.goods;
        })
      }
      //focusFlog
      let focusFlog = reactive({
        iot_focus:false
      })
      function searchFocus(key){
        if(key == 1){
          focusFlog.iot_focus = true
        }else{
          focusFlog.iot_focus = false
        }
      }
      return {keyword,Search,MenuChange,ChangeIndexFlog,searchFocus,focusFlog}
    }
}
</script>

<style scoped>
  .iot_search {
    width: 30px;
    height: 30px;
    background-color: rgb(255,255,255,0.5);
    border-radius: 15px;
    display: flex;
    align-items: center;
    transition: all 1s;
  }
  .iot_search:hover{
    width: 300px;
  }
  .iot_search input{
    width: 0px;
    border:0px;
    outline: none;
    background-color: rgb(0, 0, 0,0);
    caret-color: rgba(255,255,255);
    color: white;
    transition: all 1s;
  }
  .iot_search:hover input,input:focus{
    width: 260px;
  } 
  .iot_search.iot_focus{
    width: 300px;
  }
  .iot_search::before{
    content: '';
    display: inline-block;
    width: 20px;
    height: 20px;
    background-image: url('../assets/icons/logo/search1.png');
    background-size: contain;
    margin-left: 5px;
  }
  ::-webkit-input-placeholder {
    color: white;
    line-height: 16px;
    font-size: 13px;
}

</style>